<template>
  <view>
    <map :longitude="longitude" :latitude="latitude" :scale="scale" />
    <button type="primary" @click="openPos">打开位置</button>
    <button type="primary" @click="selPos">选择位置</button>
    <!-- webview 组件 -->
    <web-view src="http://www.itheima.com/" />
  </view>
</template>

<script>
export default {
  data () {
    return {
      // 纬度
      latitude: 39.909,
      // 经度
      longitude: 116.39742,
      // 地图缩放级别
      //数值越大=》地图显示越详细，显示范围小
      // 数值越小=》地图显示越不详细，显示范围大
      scale: 14
    }
  },
  onLoad () {
    this.getPos()
  },
  methods: {
    // 获取定位信息
    async getPos () {
      const [err, pos] = await uni.getLocation()
      // console.log(res)
      if (!err) {
        // 定位成功
        this.longitude = pos.longitude
        this.latitude = pos.latitude
      }
    },
    // 打开位置
    openPos () {
      uni.openLocation({
        // 纬度
        latitude: 39.909,
        // 经度
        longitude: 116.39742,
        success (res) {
          console.log(res)
        }
      })
    },
    // 选择位置
    selPos () {
      uni.chooseLocation({
        success: (res) => {
          console.log(
            '选择的位置：', res
          )
          // 定位后，没有刷新页面
          this.longitude = res.longitude
          this.latitude = res.latitude
          console.log(this)
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
map {
  width: 750rpx;
  height: 600rpx;
}
</style>